<template>
  <button @click="showCom = !showCom">切换显隐</button>
  <!-- 自定义指令 -->
  <!-- <HoverDemo></HoverDemo> -->
  <!-- <InfiniteScrollDemo></InfiniteScrollDemo> -->
  <!-- <ClickOutsideDemo v-if="showCom"></ClickOutsideDemo> -->
  <!-- <ThrottleDemo v-if="showCom"></ThrottleDemo> -->
  <!-- <LazyDemo v-if="showCom"></LazyDemo> -->

  <!-- 自定义hook -->
  <!-- <UseMousePositionDemo v-if="showCom"></UseMousePositionDemo> -->
  <!-- <UseCountdownDemo></UseCountdownDemo> -->
  <!-- <UseRequestDemo></UseRequestDemo> -->
  <!-- <UseWebRTCDemo></UseWebRTCDemo> -->
  <!-- <UseFormValidatorDemo></UseFormValidatorDemo> -->

  <!-- 错误捕获 -->
  <!-- <ErroredPage></ErroredPage> -->
  <!-- <ErrorBoundaryDemo></ErrorBoundaryDemo> -->

  <!-- 组件通信 -->
  <!-- <ExposeDemo></ExposeDemo> -->

  <!-- 作用域插槽 -->
  <SlotsDemo2></SlotsDemo2>
  
</template>

<script setup>
/* 自定义指令 */
import HoverDemo from "./directives/demos/HoverDemo.vue";
import InfiniteScrollDemo from "./directives/demos/InfiniteScrollDemo.vue";
import ClickOutsideDemo from "./directives/demos/ClickOutsideDemo.vue";
import ThrottleDemo from "./directives/demos/ThrottleDemo.vue";
import LazyDemo from "./directives/demos/LazyDemo.vue";

/* 自定义Hook */
import UseMousePositionDemo from "./hooks/demos/UseMousePositionDemo.vue";
import UseCountdownDemo from "./hooks/demos/UseCountdownDemo.vue";
import UseRequestDemo from "./hooks/demos/UseRequestDemo.vue";
import UseWebRTCDemo from "./hooks/demos/UseWebRTCDemo.vue";
import UseFormValidatorDemo from "./hooks/demos/UseFormValidatorDemo.vue";
import { ref } from "vue";

/* 爆发错误的页面级组件 */
import ErroredPage from "./errors/ErroredPage.vue";
import ErrorBoundaryDemo from "./errors/ErrorBoundaryDemo.vue";
import ExposeDemo from "./communication/exposeDemo.vue";

/* 组件通信 */

/* 插槽 */
import SlotsDemo2 from "./slots/SlotsDemo2.vue";


const showCom = ref(true);
</script>

<style scoped></style>
